<template>
  <div class="row4">
    <div class="box">
      <!-- 这个盒子是用来放下拉选择框的 -->
      <div
        style="
          position: absolute;
          width: 110px;
          top: 50px;
          right: 5px;
          z-index: 9;
        "
      >
        <!-- 这个盒子是用来放下拉选择框的 -->
        <el-select v-model="value" placeholder="请选择年份">
          <!-- 这个是下拉选择框 -->
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.lable"
            :value="item.value"
          ></el-option>
          <!-- 这个是下拉选择框的选项 -->
        </el-select>
      </div>
      <div class="col_1 echarts" id="row4_col_1"></div>
    </div>
    <div class="box">
      <div class="col_2 echarts" id="row4_col_2"></div>
    </div>
    <div class="box">
      <div class="col_3 echarts" id="row4_col_3"></div>
    </div>
  </div>
</template>

<script>
// 引入 echart
import * as echarts from "echarts";
export default {
  // 当前 vue文件的名字
  name: "row3",
  // 页面中的数据
  data() {
    return {
      options: [
        {
          value: "全部年份",
          label: "全部年份",
        },
        {
          value: 2015,
          label: "2015",
        },
        {
          value: 2016,
          label: "2016",
        },
        {
          value: 2017,
          label: "2017",
        },
        {
          value: 2018,
          label: "2018",
        },
        {
          value: 2019,
          label: "2019",
        },
        {
          value: 2020,
          label: "2020",
        },
        {
          value: 2021,
          label: "2021",
        },
        {
          value: 2022,
          label: "2022",
        },
        {
          value: 2023,
          label: "2023",
        },
        {
          value: 2024,
          label: "2024",
        },
        {
          value: 2025,
          label: "2025",
        },
        {
          value: 2026,
          label: "2026",
        },
        {
          value: 2027,
          label: "2027",
        },
        {
          value: 2028,
          label: "2028",
        },
        {
          value: 2029,
          label: "2029",
        },
        {
          value: 2030,
          label: "2030",
        },
        {
          value: 2031,
          label: "2031",
        },
        {
          value: 2032,
          label: "2032",
        },
        {
          value: 2033,
          label: "2033",
        },
        {
          value: 2034,
          label: "2034",
        },
        {
          value: 2035,
          label: "2035",
        },
      ],
      // 这个是用来存 选中项的 value
      value: '全部年份',
      colorFlage: 0,
    };
  },
  // 页面加载 就会执行 mounted 函数
  mounted() {
    this.getCol4_1_1(
      document.querySelector("#row4_col_1"),
      "4.1企业诚信等级-年度发布折线图(家次)"
    );
    this.getCol4_2(
      document.querySelector("#row4_col_2"),
      "4.2企业诚信等级-市级发布柱状图(家次)"
    );
    this.getCol4_3(
      document.querySelector("#row4_col_3"),
      "4.3企业诚信等级-行业发布柱状图(家次)"
    );
  },
  // 监听器 监听数据的变换
  watch: {
    // 当value发生变化时
    value(newVal, oldVal) {
      console.log(newVal, oldVal);
      // 发生变化执行渲染的方法rendering()
      this.rendering();
    },
  },
  // 方法
  methods: {
    // 4.1
    async rendering() {
      if (this.value === '全部年份') {
        this.getCol4_1_1(
          document.querySelector("#row4_col_1"),
          "4.1企业诚信等级-年度发布折线图(家次)"
        );
      } else {
        this.getCol4_1_2(
          document.querySelector("#row4_col_1"),
          "3.1企业诚信等级-年度发布折线图(家)"
        );
      }
    },
    // 4.1.1全部年份
    async getCol4_1_1(domName, title) {
      const { data } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.cxdjfbndjcSelect.do"
      );
      // console.log('4.1.1',data);
      let res = data.substring(5);
      let arr = eval("(" + res + ")");
      let cxdjBuYjc = arr.filter((item) => {
        if (item.year > 2014) {
          return item;
        }
      });
      // 定义排序规则方法
      function sortYear(a, b) {
        return a.year - b.year;
      }
      cxdjBuYjc.sort(sortYear)
      // console.log('4.1.1', cxdjBuYjc);
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          top: "15%",
          left: "15%",
          textStyle: {
            color: "#ccc",
          },
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        grid: {
          left: "3%",
          right: "4%",
          top: "25%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              interval: "0",
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            boundaryGap: false,
            // data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025',
            // '2026','2027', '2028','2029','2030','2031','2032','2033','2034','2035'],
            data: cxdjBuYjc.map((item) => {
              return item.year;
            }),
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "5%",
            start: 0,
            end: 50,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "A级",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // data: [120, 132, 101, 134, 90, 230, 210, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310, 134, 90, 230]
            data: cxdjBuYjc.map((item) => {
              return item.numA;
            }),
          },
          {
            name: "B级",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // data: [220, 182, 191, 234, 290, 330, 310, 134, 90, 230, 210,150, 232, 201, 154, 190, 330, 410, 191, 234, 290]
            data: cxdjBuYjc.map((item) => {
              return item.numB;
            }),
          },
          {
            name: "C级",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // data: [150, 232, 201, 154, 190, 330, 410, 191, 234, 290, 330,220, 182, 191, 234, 290, 330, 310, 134, 90, 230]
            data: cxdjBuYjc.map((item) => {
              return item.numC;
            }),
          },
          {
            name: "D级",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // data: [15, 23, 21,54, 19, 33, 41, 19, 23, 29, 33,22, 18, 19, 24, 20, 30, 30, 14, 90, 23]
            data: cxdjBuYjc.map((item) => {
              return item.numD;
            }),
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 4.1.2 月份
    async getCol4_1_2(domName, title) {
      const { data } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.cxdjmjcSelect.do",
        { params: { years: this.value } }
      );
      // console.log('4.1.2', data);
      let res = data.substring(5);
      let cxdjBuMjc = eval("(" + res + ")");
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: "4.1企业诚信等级-年度发布折线图(家次)",
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          top: "15%",
          left: "15%",
          textStyle: {
            color: "#ccc",
          },
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              interval: "0",
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            boundaryGap: false,
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '8月', '9月', '10月', '11月', '12月'],
            data: cxdjBuMjc.map((item) => {
              return item.month;
            }),
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "5%",
            start: 0,
            end: 50,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "A级",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis0: {
              focus: "series",
            },
            // data: [120, 132, 101, 134, 90, 230, 210, 234, 290, 330, 310]
            data: cxdjBuMjc.map((item) => {
              return item.numA;
            }),
          },
          {
            name: "B级",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // data: [220, 182, 191, 234, 290, 330, 310, 134, 90, 230, 210]
            data: cxdjBuMjc.map((item) => {
              return item.numB;
            }),
          },
          {
            name: "C级",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // data: [150, 232, 201, 154, 190, 330, 410, 191, 234, 290, 330]
            data: cxdjBuMjc.map((item) => {
              return item.numC;
            }),
          },
          {
            name: "D级",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // data: [15, 23, 21, 15, 19, 33, 41, 19, 24, 29, 33]
            data: cxdjBuMjc.map((item) => {
              return item.numD;
            }),
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 4.2
    async getCol4_2(domName, title) {
      const { data } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.cxdjfbsjjcSelect.do"
      );
      // console.log('4.2', data);
      let str = data.substring(5);
      let cxdjSjc = eval("(" + str + ")");
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#ffffff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "10%",
          top: "20%",
          containLabel: true,
        },
        legend: {
          // right: 10,
          top: "13%",
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          // data: [
          //           '邯郸',
          //           '沧州',
          //           '石家庄',
          //           '唐山',
          //           '保定',
          //           '衡水',
          //           '邢台',
          //           '廊坊',
          //           '张家口',
          //           '承德',
          //           '雄安新区',
          //           '秦皇岛',
          //           '辛集',
          //           '定州'
          //         ],
          data: cxdjSjc.map((item) => {
            return item.city;
          }),
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei",
              fontSize: 10,
            },
          },
        },
        yAxis: {
          type: "value",
          //   max:'',
          splitNumber: 4,
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisLabel: {},
        },
        // 滚动条
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "5%",
            start: 0,
            end: 40,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "A级",
            type: "bar",
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#fccb05",
                  },
                  {
                    offset: 1,
                    color: "#f5804d",
                  },
                ]),
                barBorderRadius: 12,
              },
            },
            // data: [120, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330, 410]
            data: cxdjSjc.map((item) => {
              return item.numA;
            }),
          },
          {
            name: "B级",
            type: "bar",
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#8bd46e",
                  },
                  {
                    offset: 1,
                    color: "#09bcb7",
                  },
                ]),
                barBorderRadius: 11,
              },
            },
            // data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230, 210]
            data: cxdjSjc.map((item) => {
              return item.numB;
            }),
          },
          {
            name: "C级",
            type: "bar",
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#248ff7",
                  },
                  {
                    offset: 1,
                    color: "#6851f1",
                  },
                ]),
                barBorderRadius: 11,
              },
            },
            // data: [150, 232, 201, 154, 190, 330, 410, 220, 182, 191, 234, 290, 330, 310]
            data: cxdjSjc.map((item) => {
              return item.numC;
            }),
          },
          {
            name: "D级",
            type: "bar",
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#be3c3c",
                  },
                  {
                    offset: 1,
                    color: "#6851f1",
                  },
                ]),
                barBorderRadius: 11,
              },
            },
            // data: [15, 23, 21, 14, 19, 33, 41, 22, 18, 19, 23, 29, 3, 31]
            data: cxdjSjc.map((item) => {
              return item.numD;
            }),
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 4.3
    async getCol4_3(domName, title) {
      const { data } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.hyfbjcSelect.do"
      );
      // console.log('4.3', data);
      let str = data.substring(5);
      let cxdjfbHyjc = eval("(" + str + ")");
      // console.log('4.3',  cxdjfbHyjc);
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: "4.3企业诚信等级-行业发布折线图(家次)",
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "15%",
          // data: ['A级', 'B级', 'C级', 'D级'],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "25%",
          bottom: "10%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
            rotate: -18,
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          // data: ['机械', '纺织', '煤矿', '危险化学品', '轻工', '石油天然气', '烟花爆竹', '有色', '烟草', '建材', '金属非金属矿山和尾矿库', '商贸', '冶金', '其他'],
          data: cxdjfbHyjc.map((item) => {
            return item.trade;
          }),
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitNumber: 4,
          type: "value",
        },
        // 滚动条
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "0%",
            start: 0,
            end: 40,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        color: ["#f5804d", "#09bcb7", "#6851f1", "#72cf7c"],
        series: [
          {
            name: "A级",
            type: "line",
            step: "start",
            // data: [120, 132, 101, 134, 90, 230, 210, 220, 282, 201, 234, 290, 430, 410]
            data: cxdjfbHyjc.map((item) => {
              return item.numA;
            }),
          },
          {
            name: "B级",
            type: "line",
            step: "middle",
            // data: [220, 282, 201, 234, 290, 430, 410, 450, 432, 401, 454, 590, 530, 510]
            data: cxdjfbHyjc.map((item) => {
              return item.numB;
            }),
          },
          {
            name: "C级",
            type: "line",
            step: "end",
            // data: [450, 432, 401, 454, 590, 530, 510, 120, 132, 101, 134, 90, 230, 210]
            data: cxdjfbHyjc.map((item) => {
              return item.numC;
            }),
          },
          {
            name: "D级",
            type: "line",
            step: "end",
            // data: [45, 43, 40, 44, 90, 50, 50, 10, 12, 11, 14, 9, 20, 21]
            data: cxdjfbHyjc.map((item) => {
              return item.numD;
            }),
          },
        ],
      };
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
};
</script>

<style lang="less" scoped>
.row4 {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  height: 350px;
  .box {
    // flex: 3.5;
    position: relative;
    height: 100%;
    width: 30%;
    border: 1px solid #1480f0;
    &:nth-child(2) {
      width: 39%;
      border: 1px solid #1480f0;
    }

    & /deep/ .el-input__inner {
      background-color: transparent !important;
      max-width: 120px !important;
      max-height: 30px !important;
      color: #fff;
    }

    .echarts {
      position: relative;
      padding: 10px !important;
      height: 100%;
      width: 100%;

      // & /deep/ canvas {
      //   //background-color: #333;
      // }
    }

    &:nth-child(2n - 1) {
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: #050d4b url(@/static/images/line_1.png);
      padding: 0 0.1875rem 0.1875rem;
      margin-bottom: 0.1875rem;
      flex-direction: column;
      justify-content: space-between;
    }
    &:first-child {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
    &:last-child {
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
  }
}
</style>